<template>
  <div style="padding:0px 40px;border-left:1px solid #e6e6e6">
    <el-tabs v-model="tabClick" @tab-click="handleClick" v-if="stateText=='审核成功'||stateText=='待审核'">
      <el-tab-pane label="药店信息" name="first" style="font-size:20px"></el-tab-pane>
      <el-tab-pane label="入驻协议" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if="tabClick == 'first'" class="table-c">
      <p class="font-weight font-md py-2 main-text-color">
        您的药店审核状态:
        <span class="ml-1">{{stateText}}</span>
      </p>
      <el-form label-width="150px" :model="formData" :inline="true" ref="drugForm" :rules="rules">
        <div style="background:#f9f9f9;padding:10px 20px;border-radius:5px;margin-bottom:20px">
          <h4>申请人信息</h4>
          <el-form-item label="申情人姓名：" prop="applyName">
            <el-input
              placeholder="请输入姓名"
              :disabled="disabled&&!isAdmin"
              v-model="formData.applyName"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="applyCid">
            <el-input placeholder="请输入身份证号" :disabled="disabled" v-model="formData.applyCid"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="applyerPhone">
            <el-input
              placeholder="请输入联系电话"
              :disabled="disabled&&!isAdmin"
              v-model="formData.applyerPhone"
            ></el-input>
          </el-form-item>
        </div>
        <div style="background:#f9f9f9;padding:10px 20px;border-radius:5px;margin-bottom:20px">
          <h4>店铺信息</h4>
          <el-form-item label="医保定点：">
            <el-radio v-model="formData.isPoint" label="1">是</el-radio>
            <el-radio v-model="formData.isPoint" label="2">否</el-radio>
          </el-form-item>
          <div>
            <el-form-item label="店铺名称：" prop="drugName">
              <el-input
                placeholder="请输入店铺名称"
                :disabled="disabled&&!isAdmin"
                v-model="formData.drugName"
              ></el-input>
            </el-form-item>
            <el-form-item label="营业时间：" prop="time">
              <el-time-select
                placeholder="起始时间"
                :disabled="disabled"
                v-model="formData.startHours"
                :picker-options="{ start: '08:30', step: '00:15', end: '23:00'}"
              ></el-time-select>--
              <el-time-select
                placeholder="结束时间"
                :disabled="disabled"
                v-model="formData.endHours"
                :picker-options="{ start: '08:30', step: '00:15', end: '23:00', minTime: formData.startHours}"
              ></el-time-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="所属区域：" prop="area">
              <h-area
                :editCode="editCode"
                :disabled="disabled&&!isAdmin"
                @childChange="getEditCodeName($event)"
              ></h-area>
            </el-form-item>
            <div>
              <el-form-item label="详细地址：" prop="drugAddress">
                <el-input
                  placeholder="请输入详细地址"
                  :disabled="disabled&&!isAdmin"
                  style="width:400px"
                  v-model="formData.drugAddress"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div>
            <el-form-item label="门脸图：" prop="shopFront">
              <el-upload
                :class="[{ hide: isHide }, 'avatar-uploader']"
                :action="imgUpload"
                list-type="picture-card"
                :file-list="shopFront"
                :disabled="disabled"
                :on-success="shopFrontUpload"
                :on-remove="shopFrontRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <span style="font-size:13px;color:#888">需拍出完整门匾、门框，并与店铺名称保持一致</span>
            </el-form-item>
          </div>
        </div>
        <div style="background:#f9f9f9;padding:10px 20px;border-radius:5px;margin-bottom:20px">
          <h4>
            资质信息
            <span style="font-size:13px">（须上传真实有效证件,不得涂改,模糊）</span>
          </h4>
          <div>
            <el-form-item label="营业执照：" prop="business">
              <el-upload
                :class="[{ hide: isHide }, 'avatar-uploader']"
                :action="imgUpload"
                list-type="picture-card"
                :file-list="business"
                :disabled="disabled"
                :on-success="businessUpload"
                :on-remove="businessRemove"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="药品经营许可证：" prop="license">
              <el-upload
                :class="[{ hide: isHide }, 'avatar-uploader']"
                :action="imgUpload"
                list-type="picture-card"
                :file-list="license"
                :disabled="disabled"
                :on-success="licenseUpload"
                :on-remove="licenseRemove"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="药品经营规范证书(GSP)：" prop="standard">
              <el-upload
                :class="[{ hide: isHide }, 'avatar-uploader']"
                :action="imgUpload"
                list-type="picture-card"
                :file-list="standard"
                :disabled="disabled"
                :on-success="standardUpload"
                :on-remove="standardRemove"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="互联网药品信息服务资格证书：" prop="qualification">
              <el-upload
                :class="[{ hide: isHide }, 'avatar-uploader']"
                :action="imgUpload"
                list-type="picture-card"
                :file-list="qualification"
                :disabled="disabled"
                :on-success="qualificationUpload"
                :on-remove="qualificationRemove"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </div>
        <div style="background:#f9f9f9;padding:10px 20px;border-radius:5px;margin-bottom:20px">
          <h4>法人信息</h4>
          <div>
            <el-form-item label="法人身份证正面：" prop="front">
              <el-upload
                :class="[{ hide: isHide }, 'avatar-uploader']"
                :action="imgUpload"
                list-type="picture-card"
                :limit="1"
                :file-list="front"
                :disabled="disabled"
                :on-success="frontUpload"
                :on-remove="frontRemove"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="法人身份证背面：" prop="reverse">
              <el-upload
                :class="[{ hide: isHide }, 'avatar-uploader']"
                :action="imgUpload"
                list-type="picture-card"
                :limit="1"
                :file-list="reverse"
                :disabled="disabled"
                :on-success="reverseUpload"
                :on-remove="reverseRemove"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <el-form-item label="法人姓名：" prop="legalPersonName">
            <el-input placeholder="请输入法人姓名" v-model="formData.legalPersonName" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="legalPersonCid">
            <el-input placeholder="请输入身份证号" v-model="formData.legalPersonCid" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="legalPersonPhone">
            <el-input
              placeholder="请输入手机号码"
              v-model="formData.legalPersonPhone"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
        </div>
        <div style="background:#f9f9f9;padding:10px 20px;border-radius:5px;margin-bottom:20px">
          <h4>账户信息</h4>
          <el-form-item label="商户号：" prop="merchantNo">
            <el-input placeholder="请输入商户号" v-model="formData.merchantNo" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="商户秘钥：" prop="merchantKey">
            <el-input placeholder="请输入商户密钥" v-model="formData.merchantKey" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="支付主体：" prop="merchantBody">
            <el-input placeholder="请输入支付主体" v-model="formData.merchantBody" :disabled="disabled"></el-input>
          </el-form-item>
        </div>
        <div style="text-align:center">
          <el-form-item>
            <el-button type="primary" :disabled="disabled&&!isAdmin" @click="onSubmit">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div v-if="tabClick == 'second'">入驻协议</div>
    <!-- <div v-if="stateText!=='审核成功'&&stateText!=='待审核'" class="application">
        <div class="title">您还没有店铺</div>
        <div class="img">
            <img :src="require(`../../../public/static/img/${app}/application.png`)" alt="">
        </div>
    </div>-->
  </div>
</template>

<script>
// import VDistpicker from 'v-distpicker'
import sysarea from "@/components/sysarea.vue";
export default {
  components: {
    //   "v-distpicker": VDistpicker,
    "h-area": sysarea
  },
  inject: ["reload"],
  data() {
    const applyCidRule = (rule, value, callBack) => {
      if (!this.formData.applyCid) {
        return callBack(new Error("请输入身份证号"));
      } else if (!this.verifyIdcard(this.formData.applyCid)) {
        return callBack(new Error("身份证号格式错误"));
      } else {
        callBack();
      }
    };
    const timeRule = (rule, value, callBack) => {
      if (!this.formData.startHours || !this.formData.endHours) {
        return callBack(new Error("请选择营业时间"));
      } else {
        callBack();
      }
    };
    const areaRule = (rule, value, callBack) => {
      if (!this.formData.administrativeAddress) {
        return callBack(new Error("请选择所属区域"));
      } else {
        callBack();
      }
    };
    const shopFrontRule = (rule, value, callBack) => {
      if (!this.formData.shopFront || !this.formData.shopFront.length) {
        return callBack(new Error("请上传门脸图"));
      } else {
        callBack();
      }
    };
    const businessRule = (rule, value, callBack) => {
      if (!this.formData.business || !this.formData.business.length) {
        return callBack(new Error("请上传营业执照"));
      } else {
        callBack();
      }
    };
    const licenseRule = (rule, value, callBack) => {
      if (!this.formData.license || !this.formData.license.length) {
        return callBack(
          new Error("请上传药品经营请上传药品经营许可证规范证书(GSP)")
        );
      } else {
        callBack();
      }
    };
    const standardRule = (rule, value, callBack) => {
      if (!this.formData.standard || !this.formData.standard.length) {
        return callBack(new Error("请上传药品经营规范证书"));
      } else {
        callBack();
      }
    };
    const qualificationRule = (rule, value, callBack) => {
      if (!this.formData.qualification || !this.formData.qualification.length) {
        return callBack(new Error("请上传互联网药品信息服务资格证书"));
      } else {
        callBack();
      }
    };
    const frontRule = (rule, value, callBack) => {
      if (!this.formData.front || !this.formData.front.length) {
        return callBack(new Error("请上传法人身份证正面"));
      } else {
        callBack();
      }
    };
    const reverseRule = (rule, value, callBack) => {
      if (!this.formData.reverse || !this.formData.reverse.length) {
        return callBack(new Error("请上传法人身份证背面"));
      } else {
        callBack();
      }
    };
    const legalPersonCidRule = (rule, value, callBack) => {
      if (!this.formData.legalPersonCid) {
        return callBack(new Error("请输入身份证号"));
      } else if (!this.verifyIdcard(this.formData.legalPersonCid)) {
        return callBack(new Error("身份证号格式错误"));
      } else {
        callBack();
      }
    };
    const legalPersonPhoneRule = (rule, value, callBack) => {
      if (!this.formData.legalPersonPhone) {
        return callBack(new Error("请输入手机号码"));
      } else if (!this.verifyPhone(this.formData.legalPersonPhone)) {
        return callBack(new Error("手机号码格式错误"));
      } else {
        callBack();
      }
    };
    return {
      isHide:false,
      isAdmin: sessionStorage.getItem("userId") == "1",
      disabled: false,
      labelPosition: "left",
      tabClick: "first",
      editCode: [],
      shopFront: [],
      business: [],
      license: [],
      standard: [],
      qualification: [],
      front: [],
      reverse: [],
      formData: {
        applyName: "",
        isPoint: "1",
        shopFront: [],
        business: [],
        license: [],
        standard: [],
        qualification: [],
        front: [],
        reverse: []
      },
      typeList: [
        { title: "1111", id: 1 },
        { title: "2222", id: 2 }
      ],
      rules: {
        applyName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        applyCid: [{ validator: applyCidRule, trigger: "blur" }],
        applyerPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        drugName: [
          { required: true, message: "请输入店铺名称", trigger: "blur" }
        ],
        time: [{ validator: timeRule, trigger: "blur" }],
        area: [{ validator: areaRule, trigger: "blur" }],
        drugAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        shopFront: [{ validator: shopFrontRule }],
        business: [{ validator: businessRule }],
        license: [{ validator: licenseRule }],
        standard: [{ validator: standardRule }],
        qualification: [{ validator: qualificationRule }],
        front: [{ validator: frontRule }],
        reverse: [{ validator: reverseRule }],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" }
        ],
        legalPersonCid: [{ validator: legalPersonCidRule }],
        legalPersonPhone: [{ validator: legalPersonPhoneRule }],
        merchantNo: [
          { required: true, message: "请输入商户号", trigger: "blur" }
        ],
        merchantKey: [
          { required: true, message: "请输入商户密钥", trigger: "blur" }
        ],
        merchantBody: [
          { required: true, message: "请输入支付主体", trigger: "blur" }
        ]
      },
      stateText: "未申请"
    };
  },
  methods: {
    shopFrontUpload(file) {
      this.formData.shopFront.push(file.data.original);
    },
    shopFrontRemove(file) {
      console.log(this.formData.shopFront, file);
      this.formData.shopFront.splice(this.formData.shopFront.indexOf(file), 1);
    },
    businessUpload(file) {
      this.formData.business.push(file.data.original);
    },
    businessRemove(file) {
      this.formData.business.splice(this.formData.business.indexOf(file), 1);
    },
    licenseUpload(file) {
      this.formData.license.push(file.data.original);
    },
    licenseRemove(file) {
      this.formData.license.splice(this.formData.license.indexOf(file), 1);
    },
    standardUpload(file) {
      this.formData.standard.push(file.data.original);
    },
    standardRemove(file) {
      this.formData.standard.splice(this.formData.standard.indexOf(file), 1);
    },
    qualificationUpload(file) {
      this.formData.qualification.push(file.data.original);
    },
    qualificationRemove(file) {
      this.formData.qualification.splice(
        this.formData.qualification.indexOf(file),
        1
      );
    },
    frontUpload(file) {
      this.formData.front.push(file.data.original);
    },
    frontRemove(file) {
      this.formData.front.splice(this.formData.front.indexOf(file), 1);
    },
    reverseUpload(file) {
      this.formData.reverse.push(file.data.original);
    },
    reverseRemove(file) {
      this.formData.reverse.splice(this.formData.reverse.indexOf(file), 1);
    },
    onSubmit() {
      // this.reload();
      this.$refs["drugForm"].validate(valid => {
        if (valid) {
          const params = this.deepClone(this.formData);
          params.shopFront = params.shopFront.join(",");
          params.business = params.business.join(",");
          params.license = params.license.join(",");
          params.standard = params.standard.join(",");
          params.qualification = params.qualification.join(",");
          params.front = params.front.join(",");
          params.reverse = params.reverse.join(",");
          this.post("/pharmacyplatform/settleIn", params, res => {
            this.$message.success("提交成功");
            this.reload();
            this.backtop();
          },false);
        } else {
          return false;
        }
      });
    },
    getEditCodeName(e) {
      this.formData.administrativeAddress = e.label.join("");
      this.formData.administrativeCode = e.value.join(",");
    },
    getformData() {
      this.post(
        "/pharmacyplatform/getDrugInfo",
        {},
        res => {
          if (res.data.length) {
            this.formData = res.data[0];
            this.formData.applyName = this.formData.applyerName;
            this.stateText =
              this.formData.applyStatus == "1"
                ? "待审核"
                : this.formData.applyStatus == "2"
                ? "审核成功"
                : this.formData.applyStatus == "3"
                ? "审核失败"
                : "未知";
            this.disabled = this.formData.applyStatus == "1"
                ? true
                : this.formData.applyStatus == "2"
                ? true
                : this.formData.applyStatus == "3"
                ? false
                : false;
            for (const item of this.formData.imgLs) {
              if (item.type == "shopFront") {
                this.shopFront.push({ name: item.ingSort, url: item.imgUrl });
              } else if (item.type == "business") {
                this.business.push({ name: item.ingSort, url: item.imgUrl });
              } else if (item.type == "license") {
                this.license.push({ name: item.ingSort, url: item.imgUrl });
              } else if (item.type == "standard") {
                this.standard.push({ name: item.ingSort, url: item.imgUrl });
              } else if (item.type == "qualification") {
                this.qualification.push({
                  name: item.ingSort,
                  url: item.imgUrl
                });
              } else if (item.type == "front") {
                this.front.push({ name: item.ingSort, url: item.imgUrl });
              } else if (item.type == "reverse") {
                this.reverse.push({ name: item.ingSort, url: item.imgUrl });
              }
            }
            this.sortArr(this.shopFront, "name");
            this.sortArr(this.business, "name");
            this.sortArr(this.license, "name");
            this.sortArr(this.standard, "name");
            this.sortArr(this.qualification, "name");
            this.sortArr(this.front, "name");
            this.sortArr(this.reverse, "name");
            this.formData.shopFront = this.shopFront.map((ele, i) => {
              return ele.url;
            });
            this.formData.business = this.business.map((ele, i) => {
              return ele.url;
            });
            this.formData.license = this.license.map((ele, i) => {
              return ele.url;
            });
            this.formData.standard = this.standard.map((ele, i) => {
              return ele.url;
            });
            this.formData.qualification = this.qualification.map((ele, i) => {
              return ele.url;
            });
            this.formData.front = this.front.map((ele, i) => {
              return ele.url;
            });
            this.formData.reverse = this.reverse.map((ele, i) => {
              return ele.url;
            });
            this.editCode = this.formData.administrativeCode
              .split(",")
              .map(el => Number(el));
            if (
              this.formData.applyStatus != 1 &&
              this.formData.applyStatus != 2
            ) {
              this.formData = {
                applyName: "",
                isPoint: "1",
                shopFront: [],
                business: [],
                license: [],
                standard: [],
                qualification: [],
                front: [],
                reverse: [],

              };
              this.editCode=[]
              this.shopFront=[]
              this.business=[]
              this.license=[]
              this.standard=[]
              this.qualification=[]
              this.front=[]
              this.reverse=[]
            }else{
              this.isHide=true
            }
          }
        },
        false
      );
    },
    sortArr(arr, attr) {
      arr.sort((a, b) => {
        return [a.attr] - [b.attr];
      });
    },
    handleClick(item) {
      if (item.name == "first") {
        this.getformData();
      }
    }
  },
  created() {
    this.getformData();
  }
};
</script>

<style>
.table-c table {
  border-right: 1px solid rgb(42, 182, 218);
  border-bottom: 1px solid rgb(42, 182, 218);
}
.table-c table td {
  border-left: 1px solid rgb(42, 182, 218);
  border-top: 1px solid rgb(42, 182, 218);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.el-icon-plus:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.avatar {
  width: 150px;
  height: 140px;
  display: block;
}
.application {
  padding: 20vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ccd;
}
.hide .el-upload--picture-card {
    display: none;
}
</style> 